{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <title>天算星座-卫星大数据平台</title>
    <style type="text/css">  
		html{height:100%}    
		body{height:100%; margin:0; padding:0; background-color: #000;}
        .clickable {
            cursor: pointer; /* 当鼠标悬浮时，光标变成手指形状 */
        }
	</style> 
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=b07Txardz712vRTFjDaBbPEmzOynEzOR"></script>
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/viewer.css' %}">
	<link rel="stylesheet" href="{% static 'css/app.css' %}"/>

    <script type="text/javascript" src="{% static 'js/viewer.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
	<script src="{% static 'sdk/sdk.js' %}"></script>
	<link rel="stylesheet" href="{% static 'sdk/sdk.css' %}" />
    <link rel="stylesheet" href="{% static 'sdk/helper.css' %}" />
</head>
<body>
	<!--header-->
	<div data-v-d1db20f6="" data-v-258a4cb6="" class="logo-menu">
		<div data-v-d1db20f6="" class="logo-wrap clearfix">
			<div data-v-d1db20f6="" class="logo-img fl">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
			<div data-v-d1db20f6="" class="logo-title fl">
				<span data-v-d1db20f6="">
						天算星座-智能解译中心
				</span>
			</div>
		</div>
		<div data-v-d1db20f6="" class="menu-dialog" style="display: none;">
			<i data-v-d1db20f6="" class="close-icon el-icon-close">
			</i>
			<div data-v-d1db20f6="" class="menu-img">
				<img data-v-d1db20f6="" src="" alt="">
			</div>
		</div>
	</div>
	<div data-v-37c16eed="" data-v-258a4cb6="" class="header-wrap headerGradient">
		<div data-v-37c16eed="" class="header">
			<div data-v-37c16eed="" class="fr header-content" style="width:100px;">
				<span data-v-37c16eed="" class="avartar">
					<i data-v-37c16eed="" class="icon iconfont icontouxiang">
					</i>
				</span>
			</div>
			<div data-v-37c16eed="" class="fr home-wrap">
				<div data-v-37c16eed="" class="to-index">
					<a href="https://www.bupt.edu.cn/" style="color: white;">
						北京邮电大学
					</a>
				</div>
			</div>
		</div>
	</div>
	<!--left-->
	<div data-v-258a4cb6="" id="left" style="display: none;">
		<div data-v-258a4cb6="" class="conditions-retrieval leftZore">
		</div>
		<div data-v-258a4cb6="" class="conditions-text leftZoreText" id="tackle_btn">
			智能解译
		</div>
		<div data-v-258a4cb6="" class="precise-query leftZore1">
			<div data-v-258a4cb6="" class="Parallelogram">
			</div>
		</div>
		<div data-v-258a4cb6="" class="precise-text leftZoreText" id="search_btn">
			数据检索
		</div>
		<div data-v-258a4cb6="" class="switch-text leftZoreBtn">
			<i data-v-258a4cb6="" class="el-icon-arrow-up"></i>
		</div>
	</div>
	<div data-v-258a4cb6="" id="tackle_right">
		<div data-v-258a4cb6="" class="conditions-retrieval"></div>
		<div data-v-258a4cb6="" class="conditions-text">
			智能解译
		</div>
		<div data-v-258a4cb6="" class="switch-text">
			<i data-v-258a4cb6="" class="el-icon-arrow-down"></i>
		</div>
	</div>
	<div data-v-5855f98c="" id="tackle_set" data-v-258a4cb6="" class="panel_wrap">
		<div data-v-132f128f="" data-v-5855f98c="" class="region_content">
			<div data-v-132f128f="" class="el-tabs el-tabs--top">
				<div class="el-tabs__header is-top">
					<div class="el-tabs__nav-wrap is-top">
						<div class="el-tabs__nav-scroll">
							<div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
								<div class="el-tabs__active-bar is-top" style="width: 40px; transform: translateX(0px);">
								</div>
								<div id="tab-first" aria-controls="pane-first" role="tab" aria-selected="true"
								tabindex="0" class="el-tabs__item is-top is-active">
									解译处理
								</div>
							</div>
						</div>
					</div>
				</div>
				<div data-v-5855f98c="" class="list">
					<div data-v-4ed19afa="" data-v-5855f98c="" class="satellite-sensor-filter">
						<div data-v-4ed19afa="" class="el-select typeInput" style="width: 100%;">
							<div class="el-select__tags">
								<span>
									<!--1-->
                                    {% for obj in task %}
									<span class="el-tag el-tag--info el-tag--small el-tag--light clickable" id={{ obj.model_name }}>
										<span class="el-select__tags-text">
											{{ obj.model_name }}
										</span>
									</span>
                                    {% endfor %}
								</span>
							</div>
							<div class="el-input el-input--suffix">
								<!---->
								<input type="text" readonly="readonly" autocomplete="off" placeholder=""
								class="el-input__inner" style="height: 78px;">
								<!---->
								<span class="el-input__suffix">
									<span class="el-input__suffix-inner">
										<i class="el-select__caret el-input__icon el-icon-arrow-up">
										</i>
									</span>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div data-v-5855f98c="" class="select-sousuo clearfix">
			<div data-v-5855f98c="" class="tabs-wrap fl">
				<div data-v-5855f98c="" class="el-tabs el-tabs--card el-tabs--top">
					<div class="el-tabs__header is-top">
						<div class="el-tabs__nav-wrap is-top">
							<div class="el-tabs__nav-scroll">
								<div role="tablist" class="el-tabs__nav is-top" style="transform: translateX(0px);">
									<div id="tab-1" aria-controls="pane-1" role="tab" tabindex="0" class="el-tabs__item is-top is-active"
									aria-selected="true">
										<span data-v-5855f98c="" class="tab-wrap">
											<span data-v-5855f98c="" class="noclose">
												任务列表
											</span>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="el-tabs__content">
						<div data-v-5855f98c="" role="tabpanel" id="pane-1" aria-labelledby="tab-1"
						class="el-tab-pane" style="">
						</div>
					</div>
				</div>
			</div>
			<div data-v-5855f98c="" class="fr sousuo-icon" id="tackleBtn">
				<i data-v-5855f98c="" class="icon-sousuo">
					<i data-v-5855f98c="" class="handle">
					</i>
				</i>
			</div>
		</div>
		<div data-v-5855f98c="" class="dropdown_panel">
			<!--task list-->
			<div id="task_result" style="background-color:white; height:270px"></div>
		</div>
	</div>
	<!--right-->
	<div data-v-65550fc3="" class="zyb-ss clearfix">
        <form id="myForm" method="get" novalidate>                                                       {#  #}
		{% csrf_token %}
            <div data-v-65550fc3="" id="searchBox" class="fl zyb-ss_fl">
                <input data-v-65550fc3="" type="text" name="data_id" id="data_id" placeholder="请输入数据ID">
            </div>
            <!---->
            <div data-v-65550fc3="" class="fr zyb-ss_fr">
                <button data-v-65550fc3="" type="submit" class="saveiconbox bluesaveiconbox">
                    <i data-v-65550fc3="" class="icon iconfont iconshangchuanfujian clickable"></i>
                </button>
            </div>
            <!---->
        </form>
	</div>
	<!--image-->
    <img id="image" src='{{ MEDIA_URL }}{{ img }}' style="height: 100%;" onerror="handleImageError(this)">
</div>
</body>

<script type="text/javascript">
    function handleImageError(imageElement) {
        imageElement.src = "{% static 'images/black.png' %}"; // 设置为备用图像的路径
    }
      (function () {
        // 通过替换下面这个配置来生成不同页面
          let result = {{ result|safe }}
          for(let i=0;i<result.length;i++){
              result[i]['task']
              if(result[i]['state'] === 0)
                  result[i]['state'] = '准备'
              if(result[i]['state'] === '1')
                  result[i]['state'] = '等待'
              if(result[i]['state'] === '2')
                  result[i]['state'] = '运行'
              if(result[i]['state'] === '3')
                  result[i]['state'] = '成功'
              if(result[i]['state'] === '4')
                  result[i]['state'] = '失败'
          }
          let amis = amisRequire('amis/embed');
          // 通过替换下面这个配置来生成不同页面
          let amisJSON = {
              "type": "page",
              "body": {
                  "type": "service",
                  "data": {
                      "items": result
                  },
                  "body": [{
                      "type": "table2",
                      "source": "$rows",
                      "syncLocation": false,
                      "value": result,
                      "scroll": {
                          "y": 200
                      },
                      "columns": [
                          {
                              "name": "id",
                              "label": "ID",
                              "type": "text"
                          },
                          {
                              "name": "model_name",
                              "label": "任务",
                              "type": "text"
                          },
                          {
                              "name": "date",
                              "label": "时间",
                              "type": "text"
                          },
                          {
                              "name": "state",
                              "label": "状态",
                              "type": "text"
                          },
                          {
                              "label": "操作",
                              "popOver": {
                                  "placement": "left",
                                  "container": "document.body",
                                  "body": {
                                      "type": "tpl",
                                      "tpl": "<img style='position:fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);width:500px;border: 2px solid white;' src='{{ MEDIA_URL }}TaskSet/${label}.png' alt='暂无' style='display: inline-block;'>",
                                      "name": "0",
                                  }
                              }
                          },
                      ]
                  }
                  ]
              }
          };
          let amisScoped = amis.embed('#task_result', amisJSON);
      })();
</script>
<script>
    let idx = -1
  document.addEventListener('DOMContentLoaded', function() {
    var viewer = new Viewer(document.getElementById('image'), {
		inline: true,
		navbar: false, // 隐藏导航栏
		button: false, // 隐藏关闭按钮
		title: false, // 隐藏标题
		tooltip: false, // 隐藏缩放比例
		toolbar: {
			zoomIn: true, // 显示放大按钮
			zoomOut: true, // 显示缩小按钮
			oneToOne: true, // 显示还原按钮
			rotateLeft: true, // 显示向左旋转按钮
			rotateRight: true // 显示向右旋转按钮
		},
		viewed: function() {
			viewer.zoomTo(0.6); // 设置初始缩放比例，1 表示原始大小
		}
    });
    document.getElementById('myForm').addEventListener('submit', function(event) {          //用户在右上方的输入框输入data_id
        event.preventDefault(); // 阻止表单默认提交行为
        let formData = new FormData(event.target); // 获取表单数据
        let dataValue = formData.get('data_id'); // 获取参数值
        dataValue = '/tackle.html/'+ dataValue + '/1'
        console.log('dataValue:', dataValue)
        let MEDIA_URL = "{{ MEDIA_URL }}"
        var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        $.ajax({
            type: "GET",
            url: dataValue,
            success: function (response) {
                // 操作成功后的回调函数
                if (response.error)
                    $('#result').text(response.error);
                let imgsrc = response.img
                idx = response.nid
                let img = document.getElementById('image')
                img.src = MEDIA_URL + imgsrc + '?t=' + Math.random()
                viewer.update()
                console.log(img)
            }
        })
    });

    let task = {{ task|safe }};
    for (const taskKey in task) {
        let taskName = task[taskKey]['model_name'];
        document.getElementById(taskName).addEventListener('click', function () {                   //提交水体识别任务
            let result = confirm("是否提交任务")
            if (result) {
                console.log("确定")
                var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
                let currentPath = window.location.pathname;
                if (currentPath === "/tackle.html" && idx === -1) {                                                                         //如果未选择地区
                    alert("请先选择地区")
                } else {
                    if (idx === -1) {
                        let match = currentPath.match(/tackle\.html\/(\d+)\/\d+/);
                        idx = match[1]
                    }
                    let amis = amisRequire('amis/embed');
                    let AMISJSON = {
                        "body": {
                            "type": "spinner",
                            "name": "loadingSpinner",
                            "show": true,
                            "overlay": true,
                            "size": "lg",
                        }
                    }
                    let amisScope = amis.embed('#task_result', AMISJSON);                   //查看任务结果
                    $.ajax({
                        type: "POST",
                        url: "/tackle.html/" + idx + "/1",
                        success: function (response) {
                            if (response.error)
                                $('#result').text(response.error);
                            let result = response.result
                            {#console.log(result)#}
                            {#for (let i = 0; i < result.length; i++) {#}
                            {#    if (result[i]['state'] === '0')#}
                            {#        result[i]['state'] = '准备'#}
                            {#    if (result[i]['state'] === '1')#}
                            {#        result[i]['state'] = '等待'#}
                            {#    if (result[i]['state'] === '2')#}
                            {#        result[i]['state'] = '运行'#}
                            {#    if (result[i]['state'] === '3')#}
                            {#        result[i]['state'] = '成功'#}
                            {#    if (result[i]['state'] === '4')#}
                            {#        result[i]['state'] = '失败'#}
                            //}
                            let amis = amisRequire('amis/embed');
                            // 通过替换下面这个配置来生成不同页面
                            let amisJSON = {
                                "type": "page",
                                "body": {
                                    "type": "service",
                                    "data": {
                                        "items": result
                                    },
                                    "body": [
                                        {
                                            "type": "table2",
                                            "source": "$rows",
                                            "syncLocation": false,
                                            "value": result,
                                            "scroll": {
                                                "y": 200
                                            },
                                            "columns": [
                                                {
                                                    "name": "id",
                                                    "label": "ID",
                                                    "type": "text"
                                                },
                                                {
                                                    "name": "model_name",
                                                    "label": "任务",
                                                    "type": "text"
                                                },
                                                {
                                                    "name": "date",
                                                    "label": "时间",
                                                    "type": "text"
                                                },
                                                {
                                                    "name": "state",
                                                    "label": "状态",
                                                    "type": "text"
                                                },
                                                {
                                                    "label": "操作",
                                                    "popOver": {
                                                        "placement": "left",
                                                        "container": "document.body",
                                                        "body": {
                                                            "type": "tpl",
                                                            "tpl": "<img style='position:fixed; left: 50%; top: 50%;transform: translate(-50%, -50%);width:500px;border: 2px solid white;' src='{{ MEDIA_URL }}TaskSet/${label}.png' alt='暂无' style='display: inline-block;'>",
                                                            "name": "0",
                                                        }
                                                    }
                                                },
                                            ]
                                        }
                                    ]
                                }
                            };
                            let amisScoped = amis.embed('#task_result', amisJSON);
                        }
                    })
                }
            }
        })
    }
  });
</script>
</html>